<template>
  <div>
    <van-nav-bar title="医养结合" :right-text="showPeople" @click-right="togglePeople = true" />
    <!-- 按钮组 -->
    <div class="hos-btns">
      <div class="btn-h">
        <van-button icon="manager-o" @click="gotoInfo('base')">基础信息 </van-button>
        <van-button icon="bar-chart-o" @click="gotoInfo('tj')">体检报告</van-button>
      </div>
      <div class="btn-h">
        <van-button icon="home-o" @click="gotoInfo('bl')">住院病历</van-button>
        <van-button icon="todo-list-o" @click="gotoInfo('bl')">门诊病历</van-button>
      </div>
    </div>

    <!-- 医生列表 -->
    <div class="hos-docs">
      <div class="doc-card">
        <div class="doc-title">
          <span>签约医生</span>
        </div>
        <div class="doc-detail">
          <van-icon class="doc-img" name="manager" />
          <div>
            <div class="doc-info">
              <span class="doc-name">张三</span>
              <span class="doc-pos">主治医院/内科</span>
            </div>
            <div class="doc-info doc-hos">互联网医院</div>
          </div>
        </div>
        <div class="doc-btns">
          <van-button icon="wechat" class="chat-btn" round size="small" @click="goto('chat')">聊天</van-button>
          <van-button icon="phone-circle" class="home-btn" round size="small">远程查房</van-button>
          <van-button icon="add-square" class="y-btn" round size="small">预约体检</van-button>
        </div>
      </div>

      <div class="doc-card">
        <div class="doc-detail">
          <van-icon class="doc-img" name="manager" />
          <div>
            <div class="doc-info">
              <span class="doc-name">李四</span>
              <span class="doc-pos">主治医院/内科</span>
            </div>
            <div class="doc-info doc-hos">互联网医院</div>
          </div>
        </div>
        <div class="doc-btns">
          <van-button icon="wechat" class="chat-btn" round size="small" @click="goto('chat')">聊天</van-button>
          <van-button icon="phone-circle" class="home-btn" round size="small">远程查房</van-button>
          <van-button icon="add-square" class="y-btn" round size="small">预约体检</van-button>
        </div>
      </div>
    </div>

    <van-popup class="people-dialog" v-model="togglePeople">
      <van-picker title="标题" show-toolbar :columns="peoples" :default-index="peopleIndex"
        @confirm="togglePeople = false" @cancel="togglePeople = false" @change="setPeople" />
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: 0,
        peoples: ["父亲", "母亲"],
        peopleIndex: 0,
        togglePeople: false,
      };
    },
    computed: {
      showPeople() {
        return this.peoples[this.peopleIndex];
      },
    },
    methods: {
      setPeople(picker, values) {
        this.peopleIndex = this.peoples.indexOf(values);
        this.togglePeople = false;
      },
      goto(service) {
        if (service == "chat") {
          this.$router.push('/chat');
        }
        if (service == "service") {
          this.$router.push('/work');
        }
      },
      gotoInfo(d){
        this.$router.push('/info?id='+d);
      }
    },
  };
</script>

<style>
  .hos-btns {
    font-weight: 700;
    margin-top: 2vh;
  }

  .btn-h {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2vh;
  }

  .doc-card {
    padding: 2vw;
    margin: 3vw;
    border: 1px solid #7e6969;
    border-radius: 5px;
  }

  .doc-title {
    display: flex;
    justify-content: flex-end;
    font-weight: 700;
    font-size: 15px;
  }

  .doc-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .doc-img {
    font-size: 20vw;
  }

  .doc-info {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 1vh;
    padding-left: 3vw;
  }

  .doc-name {
    font-size: 18px;
    color: #6796eb;
    font-weight: 700;
    margin-right: 3vw;
  }

  .doc-pos {
    font-size: 14px;
    color: #d1d5d7;
    font-weight: 700;
    font-size: 15px;
  }

  .doc-hos {
    color: #d1d5d7;
    font-weight: 700;
    font-size: 18px;
  }

  .doc-btns {
    margin-top: 1vh;
    display: flex;
    justify-content: space-around;
  }

  .chat-btn {
    background: #6796eb;
    color: #ffffff;
    font-size: 17px;
  }

  .home-btn {
    background: #00a9ff;
    color: #ffffff;
    font-size: 17px;
  }

  .y-btn {
    background: #1ceecf;
    color: #ffffff;
    font-size: 17px;
  }
</style>